<template>
  <div class="charge_bill_manage_container">
    <div class="search_container">
      <div class="grey_title_container">
        <span class="text" style="margin-right: 6px;"><i class="el-icon-search"></i></span>
        <span class="text">筛选查询</span>
      </div>
      <div class="search_content_container form_container">
        <el-row :gutter="17">
          <el-col :span="4" class="item">
            <div class="text_container three_text_width">
              <span class="text">姓名:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container five_text_width">
              <span class="text">电话:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="text">收费单号:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="7" class="item">
            <div class="text_container four_text_width">
              <span class="text">下单时间:</span>
            </div>
            <el-date-picker
              type="date"
              size="mini">
            </el-date-picker>
            <span class="text" style="color: #666666;font-size: 11px;margin-left: 7px; margin-right: 7px;">至</span>
            <el-date-picker
              type="date"
              size="mini">
            </el-date-picker>
          </el-col>
          <el-col :span="5" class="item">
            <div class="text_container five_text_width">
              <span class="text">收费单类型:</span>
            </div>
            <el-select v-model="selectedPayType" placeholder="请选择" size="mini">
              <el-option
                v-for="item in payTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 12px;" :gutter="17">
          <el-col :span="4" class="item">
            <div class="text_container three_text_width">
              <span class="require">*</span>
              <span class="text">下单人:</span>
            </div>
            <el-select v-model="selectedOwner" placeholder="请选择" size="mini">
              <el-option
                v-for="item in owners"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container five_text_width">
              <span class="text">收费单状态:</span>
            </div>
            <el-select v-model="selectedState" placeholder="请选择" size="mini">
              <el-option
                v-for="item in payStates"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="text">是否欠费:</span>
            </div>
            <el-select v-model="selectedIsArrears" placeholder="请选择" size="mini">
              <el-option
                v-for="item in isArrears"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7" class="item">
            <div class="text_container four_text_width">
              <span class="text">欠款时间:</span>
            </div>
            <el-date-picker
              type="date"
              size="mini">
            </el-date-picker>
            <span class="text" style="color: #666666;font-size: 11px;margin-left: 7px; margin-right: 7px;">至</span>
            <el-date-picker
              type="date"
              size="mini">
            </el-date-picker>
          </el-col>
          <el-col :span="5" class="item">
            <div class="text_container five_text_width">
              <span class="text">欠款类型:</span>
            </div>
            <el-select v-model="selectedArrearType" placeholder="请选择" size="mini">
              <el-option
                v-for="item in arrearTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <div style="text-align: center; margin-top: 16px;">
          <el-button size="small" type="primary" style="padding-left: 26px; padding-right: 26px;">搜索</el-button>
        </div>
      </div>
    </div>
    <div class="result_list_container">
      <div class="grey_title_container">
        <div class="left">
          <span class="indicator"></span>
          <span class="text">搜索列表</span>
        </div>
        <div class="right">
          <el-button type="primary" plain size="small">申请退款</el-button>
          <el-button type="primary" plain size="small">查看详情</el-button>
          <el-button type="primary" plain size="small">还款</el-button>
          <el-button type="primary" plain size="small">重咨</el-button>
          <el-button type="primary" plain size="small">跨科</el-button>
        </div>
      </div>
      <el-table
        :data="resultList"
        :border="true">
        <el-table-column
          type="selection"
          fixed
          width="35">
        </el-table-column>
        <el-table-column
          label="序号"
          align="center"
          width="55"
          prop="key1"/>
        <el-table-column
          label="收费单号"
          align="center"
          width="150"
          prop="key2"/>
        <el-table-column
          label="收费单类型"
          align="center"
          width="100"
          prop="key3"/>
        <el-table-column
          label="下单时间"
          align="center"
          width="130"
          prop="key4"/>
        <el-table-column
          label="姓名"
          align="center"
          width="55"
          prop="key5"/>
        <el-table-column
          label="电话"
          align="center"
          width="75"
          prop="key6"/>
        <el-table-column
          label="收费单状态"
          align="center"
          width="110"
          prop="key7"/>
        <el-table-column
          label="退款申请"
          align="center"
          width="70"
          prop="key8"/>
        <el-table-column
          label="优惠申请"
          align="center"
          width="70"
          prop="key9"/>
        <el-table-column
          label="欠款申请"
          align="center"
          width="70"
          prop="key10"/>
        <el-table-column
          label="欠款金额"
          align="center"
          prop="key11"/>
        <el-table-column
          label="欠款时间"
          align="center"
          width="130"
          prop="key12"/>
      </el-table>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  @Component
  export default class ChargeBillManage extends Vue {
    payTypes = [{value: '1', label: '住院押金结算'}];
    owners = [{value: '1', label: '黎可'}];
    payStates = [{value: '1', label: '已作废（交易关闭）'}];
    isArrears = [{value: '1', label: '是'}, {value: '2', label: '否'}];
    arrearTypes = [{value: '1', label: '真实欠款'}, {value: '2', label: '虚假欠款'}];
    selectedPayType = '';
    selectedOwner = '';
    selectedState = '';
    selectedIsArrears = '';
    selectedArrearType = '';
    resultList = [{
      key1: 1,
      key2: 'SHML20171227JZC001',
      key3: '住院押金结算',
      key4: '2018-01-12 12:30:45',
      key5: '吴晓晓',
      key6: '158****1235',
      key7: '已下单（代付款）',
      key8: '无',
      key9: '申请中',
      key10: '申请通过',
      key11: '9800.00',
      key12: '2018-01-12 12:30:45'
    }];
  }
</script>

<style scoped>
  .search_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .search_content_container {
    padding: 15px 10px;
  }

  .grey_title_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }
</style>
